<html
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">

    <ui:composition template="layout.xhtml">

        <ui:define name="title">
            Firma
            <script>
                function title() {
                    document.getElementById('firma').className='selected';
                }
                window.onload=title;
            </script>
        </ui:define>

        <ui:define name="content">
            <h:form id="pesquisarClienteForm">
                <div class="row">
                    <div class="column2">
                        <p:menu  >
                            <p:submenu label="Menu">
                                <p:menuitem url="criarFirma.xhtml" value="Abertura" />
                                <p:menuitem url="pesquisaFicha.xhtml" value="Reconhecimento"  rendered="false"/>
                            </p:submenu>
                        </p:menu>
                    </div>
                    <div class="column10">


                        <p:messages id="pesquisarPessoaMessages" autoUpdate="true" />

                        <f:validateBean disabled="true">

                            <p:fieldset legend="Filtros" id="dadosPessoaPanel">

                                <div class="row">
                                    <div class="column1">
                                        <p:outputLabel value="Tipo" for="nomeInputText"
                                                       rendered="#{ managerCriarPessoa.pessoa.id == null }" />
                                    </div>
                                    <div class="column10">                                
                                        <p:selectOneRadio id="tipoPessoaSelectOneMenu" value="#{ managerPesquisarPessoa.pessoaPesquisar.tipoPessoa }" >
                                            <f:selectItems value="#{ enums.tiposPessoa() }" />
                                            <p:ajax event="change" update="dadosPessoaPanel, :pesquisarClienteForm:tiposSeloDataTable"
                                                    listener="#{ managerPesquisarPessoa.limpar(managerPesquisarPessoa.pessoaPesquisar.tipoPessoa) }"/>
                                        </p:selectOneRadio>
                                    </div>
                                </div>

                                <div class="row">                            
                                    <div class="column1">
                                        <p:outputLabel value="Nome" for="nomeInputText"
                                                       rendered="#{ managerPesquisarPessoa.pessoaPesquisar.tipoPessoa eq 'FISICA'}" />                                
                                    </div>
                                    <div class="column5">
                                        <p:inputText id="nomeInputText" value="#{ managerPesquisarPessoa.pessoaPesquisar.nome }"
                                                     rendered="#{ managerPesquisarPessoa.pessoaPesquisar.tipoPessoa eq 'FISICA'}" />                                
                                    </div>

                                    <div class="column1">
                                        <p:outputLabel value="CPF" for="cpfInputMask"
                                                       rendered="#{ managerPesquisarPessoa.pessoaPesquisar.tipoPessoa eq 'FISICA'}" />                                
                                    </div>
                                    <div class="column4">
                                        <p:inputMask id="cpfInputMask" value="#{ managerPesquisarPessoa.pessoaPesquisar.cpf }"
                                                     rendered="#{ managerPesquisarPessoa.pessoaPesquisar.tipoPessoa eq 'FISICA'}" mask="999.999.999-99" />
                                    </div>
                                </div>                            

                                <div class="row">
                                    <div class="column2">
                                        <p:outputLabel value="Razão Social" for="razaoSocialInputText"
                                                       rendered="#{ managerPesquisarPessoa.pessoaPesquisar.tipoPessoa eq 'JURIDICA'}" />                                
                                    </div>
                                    <div class="column5">
                                        <p:inputText id="razaoSocialInputText" value="#{ managerPesquisarPessoa.pessoaPesquisar.razaoSocial }"
                                                     rendered="#{ managerPesquisarPessoa.pessoaPesquisar.tipoPessoa eq 'JURIDICA'}" />                                
                                    </div>
                                    <div class="column1">
                                        <p:outputLabel value="CNPJ" for="cnpjInputText"
                                                       rendered="#{ managerPesquisarPessoa.pessoaPesquisar.tipoPessoa eq 'JURIDICA'}" />                                
                                    </div>
                                    <div class="column4">
                                        <p:inputMask id="cnpjInputText" value="#{ managerPesquisarPessoa.pessoaPesquisar.cnpj }"
                                                     mask="99.999.999/9999-99" rendered="#{ managerPesquisarPessoa.pessoaPesquisar.tipoPessoa eq 'JURIDICA'}" />                                
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="column2">
                                        <p:outputLabel value="Nome Fantasia" for="nomeFantasiaInputText"
                                                       rendered="#{ managerPesquisarPessoa.pessoaPesquisar.tipoPessoa eq 'JURIDICA'}" />                                
                                    </div>
                                    <div class="column5">
                                        <p:inputText id="nomeFantasiaInputText" value="#{ managerPesquisarPessoa.pessoaPesquisar.nome }"
                                                     rendered="#{ managerPesquisarPessoa.pessoaPesquisar.tipoPessoa eq 'JURIDICA'}" />                                
                                    </div>
                                </div>
                            </p:fieldset>
                        </f:validateBean>

                        <div class="buttonAction">
                            <p:commandButton
                                id="pesquisarcommandButton" value="Pesquisar" icon="ui-icon-search"
                                styleClass="ui-priority-primary"
                                update="@form" actionListener="#{ managerPesquisarPessoa.pesquisarCliente() }" />
                            <p:commandButton value="Limpar" icon="ui-icon-close" update="@form"
                                             actionListener="#{ managerPesquisarPessoa.limpar(managerPesquisarPessoa.pessoaPesquisar.tipoPessoa) }" />
                        </div>

                        <p:fieldset legend="Resultado">
                            <p:dataTable id="tiposSeloDataTable" var="cliente" value="#{ managerPesquisarPessoa.pessoas }"
                                         rows="5" paginator="true" paginatorPosition="bottom" emptyMessage="Nenhum registro encontrado">
                                <p:column width="5%" headerText="Opções">
                                    <p:button styleClass="ui-button-only"
                                              title="Reconhecimento" href="reconhecimento.xhtml?depositante=#{ cliente.id }"
                                              icon="ui-icon-search"/>
                                </p:column>

                                <p:column headerText="Razão Social" rendered="#{ managerPesquisarPessoa.pessoaPesquisar.tipoPessoa eq 'JURIDICA' }"
                                          width="50%">
                                    <h:outputText value="#{ cliente.razaoSocial }" />
                                </p:column>
                                <p:column headerText="#{ managerPesquisarPessoa.pessoaPesquisar.tipoPessoa eq 'FISICA' ? 'Nome' : 'Nome Fantasia'}"
                                          width="50%">
                                    <h:outputText value="#{ cliente.nome }" />
                                </p:column>
                                <p:column headerText="#{ managerPesquisarPessoa.pessoaPesquisar.tipoPessoa eq 'FISICA' ? 'CPF' : 'CNPJ'}"
                                          width="40%">
                                    <h:outputText value="#{ managerPesquisarPessoa.pessoaPesquisar.tipoPessoa eq 'FISICA' ? managerPesquisarPessoa.adicionarMascaraCPF(cliente.cpf) : managerPesquisarPessoa.adicionarMascaraCNPJ(cliente.cnpj)  }" />
                                </p:column>
                            </p:dataTable>
                        </p:fieldset>

                    </div>
                </div>
            </h:form>
        </ui:define>      

    </ui:composition>

</html>
